<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="test.css">
  <title>Zepto extended data() unit tests</title>
  <script src="../vendor/evidence.js"></script>
  <script src="evidence_runner.js"></script>
  <script src="../src/zepto.js"></script>
  <script src="../src/data.js"></script>
</head>
<body>
  <h1>Zepto data() tests</h1>
  <p id="results">
    Running… see browser console for results
  </p>
  <div id="fixtures">
  <div id="data_attr" data-one="uno" data-two="due"></div>
  <div id="data_full" data-mode="awesome"></div>
  <ol id="data_list">
    <li data-category="arts"></li>
    <li data-category="science"></li>
  </ol>
  </div>

  <script>
    Evidence('ZeptoExtendedDataTest', {
      testEmptyCollection: function(t){
        var el = $('#does_not_exist');
        t.assertUndefined(el.data('one'));
      },

      testReadingAttribute: function(t){
        var el = $('#data_attr');
        t.assertEqual('uno', el.data('one'));
      },

      testNotChangingAttribute: function(t){
        var el = $('#data_attr');
        t.assertEqual('due', el.data('two'));
        el.data('two', 'changed');
        t.assertEqual('due', el.attr('data-two'));
      },

      testExtendedData: function(t){
        var els = $('#data_attr'),
          els2 = $('#data_attr'),
          obj  = { a: 'A', b: 'B' };

        els.data('obj', obj);
        t.assertIdentical(obj, els.data('obj'));
        t.assertIdentical(obj, els2.data('obj'));

        els2.data('els', els);
        t.assertIdentical(els, els.data('els'));
      },

      testMultipleElements: function(t){
        var items = $('#data_list li');

        items.data('each', 'mark');

        var values = items.map(function(){ return $(this).data('each') });
        t.assertEqual('mark, mark', values.join(', '));
      },

      testFunctionArg: function(t){
        var items = $('#data_list li');

        items.data('category', function(i, val){
          return i + '_' + val.toUpperCase();
        });

        var values = items.map(function(){ return $(this).data('category') });
        t.assertEqual('0_ARTS, 1_SCIENCE', values.join(', '));
      },

      testAllData: function(t){
        var el = $('#data_full');

        el.data().samurai = 7;
        el.data('one', 'ichi').data('two', 'ni');
        el.data('person', {name: 'Kurosawa'});

        var all = el.data();
        t.assertEqual(7, all.samurai);
        t.assertEqual('ichi', all.one);
        t.assertEqual('ni', all.two);
        t.assertEqual('Kurosawa', all.person.name);
        t.assertUndefined(all.mode);
      }
    });
  </script>
</body>
</html>
